// 用户信息列表
<template>
  <div>
    <!--<div class="user-filter-container">-->
      <!--<el-tag type="warning">{{userTage}}</el-tag>-->
      <!--<span class="search-label">模式:</span>-->
      <!--<el-select @change='handleFilter' size="small" clearable style="width: 100px" class="filter-item" v-model="params.reset_mode" placeholder="模式">-->
        <!--<el-option v-for="item in [{label:'现金',value:1},{label:'信用',value:2}]" :key="item.label" :label="item.label" :value="item.value">-->
        <!--</el-option>-->
      <!--</el-select>-->
      <!--<span class="search-label">状态:</span>-->
      <!--<el-select @change='handleFilter' size="small" clearable class="filter-item" style="width: 100px" v-model="params.status" placeholder="状态">-->
        <!--<el-option v-for="item in  [{label:'正常',value:1},{label:'冻结',value:2},{label:'停用',value:3}]" :key="item.label" :label="item.label" :value="item.value">-->
        <!--</el-option>-->
      <!--</el-select>-->
      <!--<span class="search-label">账号或名称:</span>-->
      <!--<el-input @change="handleFilter" size="small" clearable style="width:200px;" class="filter-item" v-model="params.name" placeholder="账号或昵称">-->
      <!--</el-input>-->
      <!--<el-button class="filter-item" size="small" type="primary" @click="handleFilter" icon="el-icon-search">查找</el-button>-->
      <!--<el-button class="filter-item" size="small" type="primary" @click="handleCreateAgent" icon="el-icon-circle-plus-outline" plain>新增{{plv/1+1}}级代理</el-button>-->
      <!--<el-button class="filter-item" size="small" type="primary" @click="handleCreateMember" icon="el-icon-circle-plus-outline" plain>新增{{plv/1+1}}级会员</el-button>-->
    <!--</div>-->

    <el-row class="bread-nav">
      <ul class="bread-nav-title">
        <span>{{userTage}}</span>
      </ul>
      <ul class="bread-nav-content">
      <span class="search-label">模式:</span>
      <select @change='handleFilter' v-model="params.reset_mode">
        <option v-for="item in [{label:'全部',value:0},{label:'现金',value:1},{label:'信用',value:2}]" :key="item.label" :value="item.value">
          {{item.label}}
        </option>
      </select>
      <span class="search-label">状态:</span>
      <select @change='handleFilter' v-model="params.status">
        <option v-for="item in  [{label:'全部',value:0},{label:'正常',value:1},{label:'冻结',value:2},{label:'停用',value:3}]" :key="item.label" :value="item.value">
          {{item.label}}
        </option>
      </select>
      <span class="search-label">账号或名称:</span>
      <input @change="handleFilter" type="text" v-model="params.name" placeholder="账号或昵称">
      <button @click="handleFilter">查找</button>
      <button @click="handleCreateAgent" class="btnA">新增{{NumberToChinese(plv/1+1)}}级代理</button>
      <button @click="handleCreateMember" class="btnA">新增会员</button>
      </ul>
      <ul class="bread-nav-content-right">
        <a class="back" @click="goBack">返回</a>
      </ul>
    </el-row>

    <el-row :gutter="10" class="content">
      <div class="content_left">

        <table class="myTable fontSize">
          <thead>
            <tr  class="thTr">
              <th>
                [{{info.username}}]下线管理
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <button class="level-menu-button" @click="goOther(`/user/list/1/my/${plv}/direct`)">
                  直属代理
                </button>
                <span class="level-menu-right">{{subCount.direct_sub_agent_count}}</span>
              </td>
            </tr>
            <tr>
              <td>
                <button class="level-menu-button" @click="goOther(`/user/list/2/my/${plv}/direct`)">
                  直属会员
                </button>
                <span class="level-menu-right">{{subCount.direct_sub_member_count}}</span>
              </td>
            </tr>
            <tr>
              <td>
                <button class="level-menu-button" @click="goOther(`/user/list/1/my/${plv}/all`)">
                 全部代理
                </button>
                <span class="level-menu-right">{{subCount.all_sub_agent_count}}</span>
              </td>
            </tr>
            <tr  v-for="(item,index) in subCount.agent_details" :key="item.uids">
              <td>
                <button class="level-menu-button" @click="goOther(`/user/list/1/my/${plv}/${index}`)">
                  {{NumberToChinese(index)}}级代理
                </button>
                <span class="level-menu-right">{{item.count}}</span>
              </td>
            </tr>
            <tr>
              <td>
                <button class="level-menu-button" @click="goOther(`/user/list/2/my/${plv}/all`)">
                  全部会员
                </button>
                <span class="level-menu-right">{{subCount.all_sub_member_count}}</span>
              </td>
            </tr>
          </tbody>
        </table>

      </div>

      <div class="content_right">
        <table class="myTable">
          <thead>
            <tr  class="thTr">
              <th>
                在线
              </th>
              <th>
                上级账号
              </th>
              <th>
                用户类型
              </th>
              <th>
                账号
              </th>
              <th>
                快开彩额度
              </th>
              <th>
                香港彩额度
              </th>
              <th>
                占成
              </th>
              <th>
                盘口
              </th>
              <th v-if="parseInt(params.type) !== 2">
                下线
              </th>
              <th v-if="parseInt(params.type) !== 2">
                代理
              </th>
              <th v-if="parseInt(params.type) !== 2">
                会员
              </th>
              <th v-if="parseInt(params.type) !== 2">
                新增
              </th>
              <th>
                新增日期
              </th>
              <th>
                状态
              </th>
              <th>
                功能
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in list" :key="index">
              <td>
                <span v-if="item.is_online === 0">
                  *
                </span>
                <span v-else class="isOnline">
                </span>
              </td>
              <td>
                <button v-if="item.upperLevelAgent" class="tableBtn" @click="goOther(`/user/list/all/${item.upperLevelAgent.username}/${item.upperLevelAgent.level}/direct`)">
                  {{item.upperLevelAgent.username}}
                </button>
              </td>
              <td>
                <ul>
                  <li>
                    <span>
                     {{userMap.reset_mode[item.reset_mode]}}
                    </span>
                  </li>
                  <li>
                    <span>
                      {{item.level}}级{{userMap.type[item.type]}}
                    </span>
                  </li>
                </ul>
              </td>
              <td>
                <button v-if="parseInt(item.type) === 1 " class="tableBtn" @click="goOther(`/user/list/all/${item.username}/${item.level}/direct`)">
                  {{item.username}}
                </button>
                <span v-else>
                  {{item.username}}
                </span>
                [
                <span>
                  {{item.nickname}}
                </span>
                ]
              </td>
              <td>
                <button class="tableBtn" v-if="item.upperLevelAgent" @click="changeCash(1, item.qk_cash_amount, 1, item.username, item.upperLevelAgent.qk_cash_amount)">
                  {{item.qk_cash_amount}}
                </button>
              </td>
              <td>
                <button class="tableBtn" v-if="item.upperLevelAgent" @click="changeCash(2, item.hk_cash_amount, 1, item.username, item.upperLevelAgent.hk_cash_amount)">
                  {{item.hk_cash_amount}}
                </button>
              </td>
              <td>
                <button class="tableBtn" @click="handleParentShare(index, item.username)">
                  明细
                </button>
              </td>
              <td>
                <span v-for="(handicapsItem, subIndex) in item.handicaps.split(',')" :key="subIndex">
                  {{userMap.handicaps[handicapsItem]}}盘
                </span>
              </td>
              <td v-if="parseInt(params.type) !== 2">
                <button class="tableBtn" @click="goOther(`/user/list/1/${item.username}/${item.level}/direct`)">
                  {{item.count.direct_sub_agent_count}}
                </button>
                (<button class="tableBtn" @click="goOther(`/user/list/2/${item.username}/${item.level}/direct`)">
                  {{item.count.direct_sub_member_count}}
                </button>)
              </td>
              <td v-if="parseInt(params.type) !== 2">
                <button class="tableBtn" @click="goOther(`/user/list/1/${item.username}/${item.level}/all`)">
                  {{item.count.all_sub_agent_count}}
                </button>
              </td>
              <td v-if="parseInt(params.type) !== 2">
                <button class="tableBtn" @click="goOther(`/user/list/2/${item.username}/${item.level}/all`)">
                  {{item.count.all_sub_member_count}}
                </button>
              </td>
              <td v-if="parseInt(params.type) !== 2">
                <ul>
                  <li>
                    <button class="tableBtn agentBtn" @click="goOther(`/user/set/1/${item.username}/add`)">
                      代理
                    </button>
                  </li>
                  <li>
                   <button class="tableBtn memberBtn" @click="goOther(`/user/set/2/${item.username}/add`)">
                     会员
                    </button>
                  </li>
                </ul>
              </td>
              <td>
                {{item.created_date}}
              </td>
              <td>
                <button @click="showpopup(index, item.status, item.username)" :id="'showpopup'+index">
                  <span v-for="(statusItem,statusIndex) in userMap.status" :key="statusIndex" v-if="item.status === statusIndex">
                    {{statusItem}}
                  </span>
                </button>
              </td>
              <td>
                <button class="tableBtn updataBtn" @click="handleEdit(item.$index, item)">修改</button>
                <button class="tableBtn commBtn" @click="handleCommission(item.$index, item)">退水</button>
                <button class="tableBtn logBtn" @click="handleLog(item.$index, item)">日志</button>
                <button class="tableBtn reportBtn" @click="handleRecord(item.$index, item)">记录</button>
                <button v-if="parseInt(info.level) === 0 || parseInt(info.level) === 1" class="tableBtn reportBtn" @click="handleOdds(item.$index, item)">赔率</button>
              </td>
            </tr>
          </tbody>
        </table>

        <el-row class="noticeFooter">
          <ul class="noticeFooter-left">共{{pagination.totalCount}}条记录 共{{pageNums.length}}页</ul>
          <ul class="noticeFooter-right">
            <button @click="handleCurrentChange(1)">首页</button>
            <button @click="handleCurrentChange(--pagination.currentPage)">前一页</button>
            <span>[</span>
            <button v-for="item in pageNums" :key="item" :class="item === pagination.currentPage?'noticeFooterSelected':''" @click="handleCurrentChange(item)">
              {{item}}
            </button>
            <span>]</span>
            <button @click="handleCurrentChange(++pagination.currentPage)">后一页</button>
            <button @click="handleCurrentChange(pagination.lastPage)">末页</button>
          </ul>
        </el-row>

      </div>
    </el-row>

    <div id="dialog" class="myDialog" style="display:none;">
      <div class="myDialogDiv">
        <table class="myTable">
          <tr>
            <td class="deepColor textRight">
              账号
            </td>
            <td class="textLeft">
              {{amountInfo.username}}
            </td>
          </tr>
          <tr>
            <td class="deepColor textRight">
              {{amountType}}额度
            </td>
            <td class="textLeft">
              {{lotteryAmount}}
              <button @click="WithdrawAll">
                提取全部额度
              </button>
            </td>
          </tr>
          <tr>
            <td class="deepColor textRight">
              上级可用额度
            </td>
            <td class="textLeft">
              {{upLotteryAmount}}
            </td>
          </tr>
          <tr>
            <td class="deepColor textRight">
              类型
            </td>
            <td class="textLeft">
              <label>
                <input type="radio" :value="1" v-model="amountInfo.oper_type">
                存款
              </label>
              <label>
                <input type="radio" :value="2" v-model="amountInfo.oper_type">
                提款
              </label>
            </td>
          </tr>
          <tr>
            <td class="deepColor textRight">
              金额
            </td>
            <td class="textLeft">
              <input type="text" v-model="amountInfo.amount">
            </td>
          </tr>
          <tr>
            <td class="deepColor textRight">
            </td>
            <td class="textLeft">
              <button @click="ValidateChangeAmount">
                确定
              </button>
            </td>
          </tr>
        </table>
      </div>
    </div>

    <!--遮挡层-->
    <div style="position: fixed; z-index: 0"><div id="dialogshow"  @click="diashowclick" class="dialogshow" :style="'display:'+ dialogshow" ></div></div>


    <!--遮挡层-->

    <div id="dialogShare" class="myDialog" style="display:none;">
      <div class="myDialogDiv">
        <table class="myTable" v-if="parentShare">
          <tr  class="thTr">
            <th>
              类型/账号
            </th>
            <th>
              快开彩
            </th>
            <th>
              香港彩
            </th>
          </tr>
          <tr v-for="(item,index) in parentShare" :key="index">
            <td>
              {{item.agent_level}}/{{item.username}}
            </td>
            <td>
              {{item.qk_shares}}
            </td>
            <td>
              {{item.hk_shares}}
            </td>
          </tr>
        </table>
        <table v-else>
          <tr>
            <td>
              加载中...
            </td>
          </tr>
        </table>
      </div>
    </div>

    <div class="myPopup" :style="'left:'+popupX+'px;top:'+(parseInt(popupY) - parseInt(appMainTop))+'px;display:'+popupVisible">
      <table class="myTable">
        <tr>
          <th style="padding:0">
            修改帐户状态
            <button @click="popupVisible = 'none'" class="delBtn">
            </button>
          </th>
        </tr>
        <tr>
          <label v-for="(item, index) in userMap.status">
            <input type="radio" :value="index" v-model="changeStatus.status" @change="changeAgentStatus()">
            {{item}}
          </label>
        </tr>
      </table>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { user as userMap } from '@/utils/map' // 参数映射
import $ from 'jquery'
import 'jquery-ui/ui/widgets/dialog'
import { NumberToChinese } from '@/utils/transformNum'
export default {
  data() {
    return {
      dialogshow: 'none',
      changeStatus: {
        username: '',
        status: 1,
      },

      popupX: '',
      popupY: '',
      popupVisible: 'none',
      amountInfo: '',
      amountType: '',
      lotteryAmount: '',
      upLotteryAmount: '',

      plv: null, // 父级等级
      userTage: null, // 用户标签
      userMap: userMap, // 用户字段映射
      parentShare: null, // 用户父级占成列表
      // 查詢參數
      params: {
        lv: null, // int 代理等级
        type: null, // enum(1,2)1代理,2会员,null表示2种都查询
        parent: null, // string 上级名称
        reset_mode: 0, // enum(1,2) 1现金,2信用
        name: null, // string(25) 账号名称或者昵称
        status: 0, // enum(1,2,3) 代理状态:1启动,2冻结,3停用
        perpage: 10, // 每页数量
      },
      // 额度修改表单
      amountForm: {
        username: null,
        amount: null, // 变更额度
        lottery_type: null, // 彩种 1:快开,2:香港
        oper_type: '1', // 操作类型 1:存入,2:提取
        parentAmount: null, // 父级额度
        selfAmount: null, // 自身额度
        max: null, // 最大额度
      },
      amountFormRules: {
        oper_type: [
          {
            required: true,
            trigger: 'blur',
            message: '请选择类型',
          },
        ],
        amount: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入金额',
          },
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (value / 1 <= 0) {
                callback(new Error('金额要大于0'))
              } else {
                callback()
              }
            },
          },
        ],
      },
      // 分页信息
      pagination: {
        currentPage: 1,
        totalCount: 0,
        defaultPageSize: 2,
        lastPage: 1,
      },
      list: null, // 列表数据
      loading: true,
      subCount: {}, // 下级数量统计列表
    }
  },
  // 数据格式化
  filters: {
    filterHandicaps() {},
    // 根据操作,返回修改额度的最大值
  },
  computed: {
    ...mapGetters(['info', 'appMainTop']),
    pageNums() {
      if (this.pagination.defaultPageSize !== 0) {
        const num = Math.ceil(this.pagination.totalCount / this.pagination.defaultPageSize)
        this.pagination.lastPage = num
        const ArrayNum = []
        for (let i = 1; i <= num; i++) {
          ArrayNum.push(i)
        }
        return ArrayNum
      } else {
        this.pagination.lastPage = 0
        return []
      }
    },
  },
  created() {
    // 验证参数
    console.log('验证参数的参数', this.$route)
    this.checkParams(this.$route.params)
    // 拉取数据
    this.fetchData()
  },
  mounted() {
    const  _this=this
    $( "#dialog" ).dialog({
      autoOpen: false,
      close: function() {
        _this.dialogshow='none'
      }
    }),
    $( "#dialogShare" ).dialog({
      autoOpen: false,
      close: function() {
        _this.dialogshow='none'
      }
    }),
    $('#dialog').dialog({
      width: 430,
      autoOpen: false,
    })
    $('#dialogShare').dialog({
      autoOpen: false,
      width: 430,
    })
    const tmp = $('.ui-dialog-titlebar-close').children().clone()
    $('.ui-dialog-titlebar-close').html('').append(tmp)
  },
  methods: {
    NumberToChinese,
    diashowclick(){
      this.dialogshow='none'
      $('#dialog').dialog('close')
    },
    changeAgentStatus() {
      this.$store
        .dispatch('ChangeStatus', this.changeStatus)
        .then(response => {
          if (response.status) {
            this.$message({
              message: `${this.changeStatus.username}状态修改成功`,
              type: 'success',
            })
          } else {
            this.$message({
              message: `${this.changeStatus.username}状态修改失败`,
              type: 'error',
            })
          }
          this.popupVisible = 'none'
          // 修改后拉取数据
          this.fetchData()
        })
    },
    showpopup(index, value, userName) {
      this.changeStatus.status = value
      this.changeStatus.username = userName
      this.popupVisible = 'block'
      const el = document.getElementById('showpopup' + index)
      this.popupX = el.getBoundingClientRect().left - 100
      this.popupY = el.getBoundingClientRect().top + 25
      setTimeout(() => {
        this.popupVisible = 'none'
      }, 5000)
    },

    // 换页
    getNoteDetails(){

    },
    ValidateChangeAmount() {
      if (this.amountInfo.amount === null) {
        alert('金额不能为空')
      }
      if (this.amountInfo === 0 === null) {
        alert('请选择类型')
      } else {
        this.$store.dispatch('ValidateChangeAmount', { ChangeAmountForm: this.amountInfo })
          .then(response => {
            console.log(response)
            if (response.status) {
              this.$store.dispatch('ChangeAmount', { ChangeAmountForm: this.amountInfo })
                .then(response => {
                  if (response.status) {
                    alert(response.message)
                    this.dialogshow='none'
                    $('#dialog').dialog('close')
                    this.checkParams(this.$route.params)
                    this.fetchData()
                  } else {
                    alert(Object.values(response.message)[0].toString())
                  }
                })
            } else {
              alert(Object.values(response.message)[0].toString())
            }
          })
      }
    },
    WithdrawAll() {
      const params = {
        username: this.amountInfo.username,
        l_type: this.amountInfo.lottery_type,
        mode: this.amountInfo.mode,
      }
      if (window.confirm('是否确定抽取额度吗？')) {
        this.$store.dispatch('WithdrawAll', params)
          .then(response => {
            console.log(response.status)
            if (response.status) {
              alert(response.message)
              $('#dialog').dialog( "destroy" )
              this.checkParams(this.$route.params)
              this.fetchData()
            } else {
              alert(response.message)
            }
          })
        return true
      } else {
        return false
      }
    },
    changeCash(type, value, mode, username, upAmount) {
      this.dialogshow='block'
      this.amountInfo = ''
      if (mode === 1) { // 1现2信
        if (type === 1) { // 1快2港
          this.amountType = '快开彩'
        } else {
          this.amountType = '香港彩'
        }
      } else {
        if (type === 1) {
          this.amountType = '快开彩信用'
        } else {
          this.amountType = '香港彩信用'
        }
      }
      this.upLotteryAmount = upAmount
      this.lotteryAmount = value
      const temp = {
        username: username,
        amount: null,
        lottery_type: type,
        oper_type: null,
        mode: mode,
      }
      this.amountInfo = temp
      $('#dialog').dialog({
        title: this.amountInfo.username + '#额度修改',
      })
      $('#dialog').dialog("open")

      console.log(this.list,'6666666666')
      console.log(this.list[0].qk_cash_amount,'55555555555')
    },
    goOther(value) {
      this.$router.push(value)
    },
    goBack() {
      this.$router.go(-1)
    },
    // 根据传入的参数,转换post的参数
    // 路由传入3个参数,type,parent,lv
    checkParams(params) {
      // console.log(params);
      // 用户
      console.log('验证参数', params)
      if (params.parent === 'my') {
        this.params.parent = this.info.username
        this.userTage = this.info.username
        this.fetchSubCount()
      } else {
        this.params.parent = params.parent
        this.userTage = params.parent
        this.fetchSubCount(this.params.parent)
      }

      // 父级等级
      if (params.plv === 'my') {
        this.plv = this.info.level
      } else {
        this.plv = params.plv
      }

      // 下级等级
      if (params.lv === 'direct') {
        this.params.lv = parseInt(this.plv, 10) + 1 // 当前用户的lv的下级
        this.userTage += ` -> 直属${this.params.lv}级`
      } else if (params.lv === 'all') {
        this.params.lv = null
        this.userTage += ` -> 全部`
      } else if (parseInt(params.lv, 10) >= 0) {
        this.params.lv = parseInt(params.lv, 10) // 指定用户的下级
        this.userTage += ` -> ${this.params.lv}级`
      }

      // 类型
      if (parseInt(params.type) === 1) {
        this.params.type = params.type
        this.userTage += '代理'
      } else if (parseInt(params.type) === 2) {
        this.params.type = params.type
        this.userTage += '会员'
      } else {
        this.params.type = null // 全部
        this.userTage += `代理和会员`
      }
    },

    // 获取数据
    fetchData() {
      this.loading = true
      const tempParams = JSON.parse(JSON.stringify(this.params))
      if (this.$route.params.parent === 'my') {
        delete tempParams.parent
      }
      console.log('获取数据', this.params)
      this.$store
        .dispatch('ListAgent', {
          params: tempParams,
          pagination: this.pagination,
        })
        .then(response => {
          console.log('123456789000', response)
          this.loading = false
          this.list = response.list
          if (response.list) {
            this.pagination.totalCount = parseInt(response.pagination.totalCount)
            this.pagination.defaultPageSize = parseInt(response.pagination.defaultPageSize)
          } else {
            this.pagination.totalCount = 0
            this.pagination.defaultPageSize = 0
          }
        })
    },

    // 当前页变化
    handleCurrentChange(value) {
      if (this.pagination.lastPage !== 0) {
        if (value < 1) {
          value = 1
        }
        if (value > this.pagination.lastPage) {
          value = this.pagination.lastPage
        }
        this.pagination.currentPage = value
        this.fetchData()
      }
    },

    // 每页显示数量变化
    handlePageSizeChange(value) {
      this.params.perpage = value
      this.fetchData()
    },
    handleOdds(index, row) {
      this.$router.push(`/user/odds/${row.type}/${row.upperLevelAgent.username}/edit/${row.username}/${row.level}`)
    },
    handleCreateAgent() {
      // 新增代理
      this.$router.push(`/user/set/1/${this.params.parent}/add`)
    },
    handleCreateMember() {
      // 新增会员
      this.$router.push(`/user/set/2/${this.params.parent}/add`)
    },
    handleEdit(index, row) {
      this.$router.push(
        `/user/set/${row.type}/${row.upperLevelAgent.username}/edit/${row.username}/${row.level}`
      )
      // 修改会员
    },
    handleCommission(index, row) {
      // 退水设置
      this.$router.push(`/user/commission/${row.type}/${row.upperLevelAgent.username}/edit/${row.username}/${row.level}`)
    },
    handleLog(index, row) {
      // 日志
      this.$router.push(`/profile/loginlog/${row.username}`)
    },
    handleRecord(index, row) {
      // 记录
      this.$router.push(`/user/record/${row.username}`)
    },
    handleFilter() {
      // 搜索
      this.fetchData()
    },

    // 下级数量列表
    fetchSubCount(agentname) {
      this.$store
        .dispatch('SubCount', {
          agentname: agentname,
        })
        .then(response => {
          console.log('下级数量列表', response)
          this.subCount = response
        })
    },
    formatHandicaps(row, column) {
      return row.handicaps.split(',').map(val => {
        return userMap.handicaps[val]
      })
    },
    // 清空amountFormd的数据
    resetAmountForm(lottery_type, row) {
      switch (lottery_type) {
        case 1:
          // 快开
          this.amountForm.selfAmount = parseInt(row.qk_lottery_amount) // 自身额度
          this.amountForm.parentAmount = parseInt(
            row.upperLevelAgent.qk_lottery_amount // 上级额度
          )
          break
        case 2:
          // 香港
          this.amountForm.selfAmount = parseInt(row.hk_lottery_amount) // 自身额度
          this.amountForm.parentAmount = parseInt(
            row.upperLevelAgent.hk_lottery_amount // 上级额度
          )
          break
        default:
          break
      }
      // 赋值给form
      this.amountForm.lottery_type = lottery_type
      this.amountForm.username = row.username
      this.handleAmountOperTypeChange()
    },
    // 处理额度操作类型的变化
    handleAmountOperTypeChange() {
      if (this.amountForm.oper_type === 1) {
        // 存入 增加自身额度
        this.amountForm.max = this.amountForm.parentAmount
      } else {
        // 提取 减少自身额度
        this.amountForm.max = this.amountForm.selfAmount
      }
      // 修改amount
      if (this.amountForm.amount > this.amountForm.max) {
        this.amountForm.amount = this.amountForm.max
      }
    },
    // 提交额度变更
    amountChangeSubmit() {
      // console.log(this.amountForm);
      // 验证额度
      if (this.amountForm.amount <= 0) {
        this.$message({
          message: '额度要大于0',
          type: 'error',
        })
        return false
      }
      console.log('提交额度变更', this.amountForm)
      // 发送请求
      this.$store
        .dispatch('ValidateChangeAmount', {
          ChangeAmountForm: this.amountForm,
        })
        .then(response => {
          if (response.length === 0) {
            // 验证通过
            this.$store
              .dispatch('ChangeAmount', {
                ChangeAmountForm: this.amountForm,
              })
              .then(res => {
                if (res === true) {
                  // 修改成功
                  this.$message({
                    message: `${this.amountForm.username}已${
                      this.amountForm.oper_type === 1 ? '存款' : '提款'
                    }${
                      this.amountForm.lottery_type === 1 ? '快开彩' : '香港彩'
                    }额度${this.amountForm.amount}元!`,
                    type: 'success',
                  })
                  // 重新拉取表格
                  this.fetchData()
                } else {
                  // 修改失败
                  this.$message({
                    message: Object.values(res)[0].toString(),
                    type: 'error',
                  })
                }
              })
          } else {
            // 服务端验证失败
            this.$message({
              message: Object.values(response)[0].toString(),
              type: 'error',
            })
          }
        })
    },
    // 处理全部提款
    handleWithdrawAll() {
      this.$store
        .dispatch('WithdrawAll', {
          username: this.amountForm.username,
          l_type: this.amountForm.lottery_type, // 1:快开,2:香港
        })
        .then(response => {
          if (response === true) {
            this.$message({
              message: `${this.amountForm.username}${
                this.amountForm.lottery_type === 1 ? '快开彩' : '香港彩'
              }额度已全部提取`,
              type: 'success',
            })
            // 重新拉取数据
            this.fetchData()
          } else {
            this.$message({
              message: `${this.amountForm.username}额度提取失败`,
              type: 'error',
            })
          }
        })
    },
    // 处理单元格的用户状态变化
    handleCellStatusChange(index, row) {
      this.$store
        .dispatch('ChangeStatus', {
          username: row.username,
          status: row.status,
        })
        .then(response => {
          if (response.status === true) {
            this.$message({
              message: `${row.username}状态修改成功`,
              type: 'success',
            })
          } else {
            this.$message({
              message: `${row.username}状态修改失败`,
              type: 'error',
            })
            // 修改失败重新拉取数据
            this.fetchData()
          }
        })
    },
    // 从服务器获取用户的父级占成明细
    handleParentShare(index, username) {
      this.dialogshow='block'
      this.parentShare = null
      this.$store
        .dispatch('ParentShare', {
          username: username,
        })
        .then(response => {
          console.log('------------------', response)
          const newData = []
          for (const key in response) {
            if (key !== 'message') {
              newData.push(response[key])
            }
          }
          this.parentShare = newData // 反转顺序
        })
      $('#dialogShare').dialog({
        title: username + '#占成明细',
      })
      $('#dialogShare').dialog("open")
    },
    // 为每一行添加样式
    tableRowClassName({ row, rowIndex }) {
      if (row.status === 2) {
        return 'warning-row'
      } else if (row.status === 3) {
        return 'error-row'
      }
      return ''
    },
  },
  watch: {
    $route(to, from) {
      // 监控路由变化,从新加载数据
      if (to.params !== from.params) {
        this.checkParams(to.params)
        if (this.pagination.currentPage !== 1) {
          this.pagination.currentPage = 1 // 默认查询第一页,当前页变化,会触发数据拉取
        }
        this.fetchData()
      }
    },
  },
}
</script>
<style scoped>
  .bread-nav{
    height:30px;
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }
  .bread-nav-title{
    color:#386399;
    font-weight: bold;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }
  .bread-nav-content{
    padding-left: 20px;
    float: left;
  }
  .bread-nav-content select{
    height:20px;
    line-height: 20px;
    margin-top: 5px;
  }
  .bread-nav-content input[type="text"]{
    width:100px;
  }
  .bread-nav-content-right{
    float: right;
  }
  .bread-nav-content-right .back{
    border:0;
    background:url(/static/agent/img/ico_back.png) no-repeat left 8px;
    color:#386399;
    display: block;
    font-weight: bold;
    margin-right: 10px;
    padding: 0 0 0 20px;
  }
  .bread-nav-content-right .back:hover{
    text-decoration: underline;
  }
  .btnA{
    border:none;
    color: #e60012;
    font-weight: bold;
    padding: 5px 0 5px 20px;
    margin-left: 15px;
    background: url(/static/agent/img/ico_back.png) no-repeat left -24px;
  }
  .btnA:hover{
    text-decoration: underline;
  }

  .level-menu-button{
    border:none;
    background-color: rgba(0,0,0,0);
    float: left;
    color:blue;
    padding: 5px 0 5px 5px;
  }
  .level-menu-button:hover{
    color:red;
    text-decoration: underline;
  }
  .level-menu-right{
    display: inline-block;
    float: right;
    padding: 5px 10px 5px 0;
  }

  .fontSize{
    font-size:13px !important;
  }

  .myTable{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 2px  0;
    text-align: center;
  }
  .myTable .thTr{
    background: url(/static/agent/img/table_head.gif) repeat-x;
  }
  .myTable th{
    background: linear-gradient(to bottom, #fff 0%, #D9EFF8 100%);
    text-align: center;
    color: #344b50;
    font-weight: bold;
    height:27px;
    line-height: 14px;
    font-size:13px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .myTable td{
    text-align: center;
    color: #344b50;
    line-height: 14px;
    font-size:13px;
    padding: 1px;
    border: 1px solid #B9C2CB;
    box-sizing: border-box;
  }
  .deepColor{
    background-color: #F2F2F2;
  }
  .tableBtn{
    color:blue;
    background-color: rgba(0,0,0,0);
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0;
  }
  .tableBtn:hover{
    text-decoration: underline;
    color:red;
  }
  .myTableTr:hover{
    background-color: #deedfe;
  }
  .myTableArray{
    margin-top: 20px;
  }
  .agentBtn{
    background: url(/static/agent/img/ico_bu.png) no-repeat left top !important;
    padding: 2px 0 0 21px;
    margin: 0;
  }
  .memberBtn{
    background: url(/static/agent/img/ico_bu.png) no-repeat 0 -18px !important;
    padding: 2px 0 0 21px;
    margin: 0;
  }
  .updataBtn{
    background: url(/static/agent/img/edit.gif) no-repeat left center;
    padding-left: 14px;
  }
  .commBtn{
    background: url(/static/agent/img/edt.gif) no-repeat left center;
    padding-left: 14px;
  }
  .logBtn{
    background: url(/static/agent/img/22.gif) no-repeat left center;
    padding-left: 14px;
  }
  .reportBtn{
    background: url(/static/agent/img/44.gif) no-repeat left center;
    padding-left: 14px;
  }
  .isOnline{
    background: url(/static/agent/img/u1.gif) no-repeat;
    width: 20px;
    height: 20px;
    display: inline-block;
  }


  .noticeFooter {
    background-color: #EEEEEE;
    margin: 5px 0;
    font-size:13px;
    padding:5px 0;
  }

  .noticeFooter-left {
    float: left;
  }

  .noticeFooter-right {
    float: right;
  }

  .noticeFooter-right button {
    border: 0;
    background-color: rgba(0, 0, 0, 0);
    color: blue;
    cursor: pointer;
  }

  .noticeFooter-right button:hover {
    color: red;
    text-decoration: underline;
  }

  .noticeFooterSelected {
    color: #ccc !important;
  }

  .dialogshow{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(136, 136, 136, 0.3);
    z-index: 300;
    overflow-y: auto;
  }
  .myDialog{
    background-color: #FFF;
    margin: 0;
  }
  .myDialogDiv{
    background-color: #FFF;
    width:400px;
  }
  .textLeft{
    text-align: left !important;
  }
  .textRight{
    text-align: right !important;
    width: 25% !important;
  }
  .myPopup{
    position: absolute;
    z-index:2100;
    background-color: #FFF;
  }
  .delBtn{
    border:0;
    background: url(/static/agent/img/del.gif) no-repeat;
    width: 16px;
    height: 16px;
    float: right;
    cursor: pointer;
    vertical-align: middle;
    margin: 4px 2px 0 0;
  }
</style>
<style>
.user-table-container {
  width: 100%;
  display: inline-block;
}
.user-filter-container .filter-item {
  margin-right: 12px;
  margin-bottom: 15px;
}

.user-filter-container .search-label {
  font-size: 12px;
}

.tableHeader{
  box-shadow: inset 0px -14px 19px 2px #CAE8F6;
  height: 25px;
  text-align: center;
  color: #131950;
  font-weight: bold;
  line-height: 25px;
  font-size:14px;
  padding: 0 !important;
  margin: 0;
}
.tableCellClassName{
  height: 25px;
  text-align: center;
  color: #131950;
  line-height: 25px;
  font-size:14px;
  padding: 0;
  /*border: 1px solid #B9C2CB;*/
}

.level-menu {
  text-align: center;
  font-size: 12px;
}

.level-menu .el-menu {
  border: solid 1px #b9c2cb;
  border-top: none;
  border-radius: 3%;
}
.level-menu .el-menu-item {
  height: 30px;
  line-height: 30px;
  color: blue;
}
.table-user-list {
}
.table-user-list .el-table .warning-row {
  background: oldlace;
}

.table-user-list .el-table .error-row {
  background: rgb(241, 216, 220);
}
.opera-link {
  margin: 0 5px;
}


.content{
  padding: 10px;
  min-width:1350px;
}
.content_left{
  float:left;
  min-width: 120px;
  max-width: 150px;
  margin-right: 10px;
}
.content_right{
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  overflow: hidden;
}
.bread-nav-content .el-input__inner{
  height:25px;
  line-height: 25px;
}
.bread-nav-content .el-button{
  padding: 4px 10px;
}
.level-menu .el-tag{
  box-shadow: inset 0px -10px 10px 2px #CAE8F6;
  border-radius: 0;
  border: 1px solid #b9c2cb;
  background-color: rgba(0,0,0,0);
  height: 24px;
  line-height: 24px;
  font-weight: bold;
  font-size: 13px;
  color:#344B54
}
</style>

